import  React,{ lazy } from "react"

import Loading from '@/components/Loading'
// import Home from '../views/Home'
// import About from '../views/About'
// import Comp1 from '../components/Comp1'
// import Comp2 from '../components/Comp2'
import Login from '@/views/Login'

//懒加载
const Home = lazy(()=>import("../views/Home"))
const About =lazy(()=>import("../views/About"))
const Comp1 =lazy(()=>import("../components/Comp1"))
const Comp2 =lazy(()=>import("../components/Comp2"))
const User = lazy(()=>import("../views/User"))
const Page1 = lazy(()=>import("../views/Page1"))
const Page2 = lazy(()=>import("../views/Page2"))
const Info = lazy(()=>import("../views/Info"))
const Set = lazy(()=>import("../views/Set"))
const File = lazy(()=>import("../views/File"))

//懒加载模式需要我们在外面套一层 loading 的提示加载组件
const withLoadingComponent = (comp:JSX.Element) => (
  <React.Suspense fallback={<Loading></Loading>}>
    {comp}
  </React.Suspense>
)


import {Navigate} from "react-router-dom"

const routes = [
  //嵌套路由
  {
    path:"/",
    element:<Home />,
    children:[
      {
        path: "/comps/comp1",
        element:withLoadingComponent(<Comp1></Comp1>)
      },{
        path: "/comps/comp2",
        element:withLoadingComponent(<Comp2></Comp2>)
      },{
        path:'/page1',
        element:withLoadingComponent(<Page1></Page1>)
      },{
        path:'/page2',
        element:withLoadingComponent(<Page2></Page2>)
      },{
        path:'/user/info',
        element:withLoadingComponent(<Info></Info>)
      },{
        path:'/user/set',
        element:withLoadingComponent(<Set></Set>)
      },{
        path:'/file',
        element:withLoadingComponent(<File></File>)
      }
    ]
  },
  {
    path:'/about',
    element:withLoadingComponent(<About></About>)

      // <React.Suspense fallback={<div>loading...</div>}>
      //   <About></About>
      // </React.Suspense>
  },{
    path:'user',
    element:withLoadingComponent(<User/>)
  },{
    path:'/login',
    element:<Login></Login>
  },{
    path:'*',
    element:<Navigate to="/page1"></Navigate>
  }
]

export default routes